<template>
  <div class="trafficVolume borderOne">
    <div class="title">
      <p class="way">运输方式</p>
      <p class="passengerTraffic">客运量</p>
      <p class="freight">货运量</p>
    </div>
    <ul v-for="item in trafficVolumeData">
      <li>
        <p class="way">
          <img :src="item.pic" alt="" />
          <span>{{ item.name }}</span>
        </p>
        <p class="passengerTraffic">
          <span>{{ item.passengerNum }}万人</span>
        </p>
        <p class="freight">
          <span>{{ item.freightNum }}万吨</span>
        </p>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import plane from '@/assets/images/plane.png';
import waterway from '@/assets/images/waterway.png';
import railway from '@/assets/images/railway.png';
const trafficVolumeData = reactive([
  {
    pic: plane,
    name: '航空运输',
    passengerNum: 4347.2,
    freightNum: 1427.2,
  },
  {
    pic: waterway,
    name: '水路运输',
    passengerNum: 2147.2,
    freightNum: 327.2,
  },
  {
    pic: railway,
    name: '铁路运输',
    passengerNum: 7557.2,
    freightNum: 2427.2,
  },
]);
</script>
<style lang="scss" scoped>
.trafficVolume {
  padding: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #d8dee0;
  .title {
    display: flex;
    align-items: center;
    width: 100%;
    p {
      font-size: 18px;
      font-weight: 600;
    }
  }
  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    li {
      width: 100%;
      height: 60px;
      background-color: rgba(8, 40, 69, 0.3);
      border: 1px solid #0e406e;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 25px;
        height: 25px;
        display: block;
        margin-right: 3px;
      }
      p {
        display: flex;
        align-items: center;
      }
      .passengerTraffic,
      .freight {
        background: linear-gradient(to left, #06aae3, #06aae3) left top
            no-repeat,
          linear-gradient(to bottom, #06aae3, #06aae3) left top no-repeat,
          linear-gradient(to left, #06aae3, #06aae3) right top no-repeat,
          linear-gradient(to bottom, #06aae3, #06aae3) right top no-repeat,
          linear-gradient(to left, #06aae3, #06aae3) left bottom no-repeat,
          linear-gradient(to bottom, #06aae3, #06aae3) left bottom no-repeat,
          linear-gradient(to left, #06aae3, #06aae3) right bottom no-repeat,
          linear-gradient(to left, #06aae3, #06aae3) right bottom no-repeat;
        /*设置大小*/
        background-size: 5px 1px, 1px 5px, 5px 1px, 1px 5px, 5px 1px, 1px 5px,
          5px 1px, 1px 5px;
        background-color: rgba(15, 54, 87, 0.4);
        padding: 10px 0;
        display: flex;
        justify-content: center;
      }
    }
  }
  .way {
    width: 20%;
  }
  .passengerTraffic {
    width: 35%;
    span {
      color: #08baa1;
      font-weight: 600;
    }
  }
  .freight {
    width: 35%;
    span {
      color: #e3e20d;
      font-weight: 600;
    }
  }
}
</style>
